<template>
	<view class="group">
		<view>用户选择事件回调：{{ addressInfo }}</view>
		<view>区域编码双向绑定：{{ valCode }}</view>
		<view>地址双向绑定：{{ val }}</view>
	</view>
	<view class="center">
		<sh-address v-model:codeValue="valCode" v-model="val" @change="change" @columnchange="columnchange">
			{{
        addressInfo
          ? `用户选择了：${addressInfo.province}-${addressInfo.city}-${addressInfo.area}`
          : "点此选择区域"
      }}
		</sh-address>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const addressInfo = ref();
	const change = (e) => {
		addressInfo.value = e;
	};

	const columnchange = (e) => {
		console.log("当前选中行列 -->", e);
	};

	const valCode = ref(["51", "5101", "510107"]);

	const val = ref(["四川省", "成都市", "武侯区"]);

	const changeHandle = (e) => {
		console.log(e);
	};
</script>

<style lang="scss">
	.group {
		display: grid;

		view {
			padding: 10rpx 0;
		}
	}

	.center {
		margin-left: 50%;
		transform: translateX(-50%);
		margin-top: 20vh;
		text-align: center;
	}
</style>